export default {
  arrowSize: 0,
  draw(cfg, group) {
    // let lineWidth = cfg.gatewayType === 'start' && !cfg.passed ? 5 : 3;
    let lineWidth = cfg.gatewayType === 'start' ? 5 : 3;
    let lineClass = 'end-gate-way-edge';
    if (cfg.gatewayType === 'start') {
      lineClass = 'start-gate-way-edge h-flow-formula-icon h-flow-node';
    }
    let shape = group.addShape('path', {
      name: 'path-shape', attrs: {
        stroke: '#c7c7c7',
        class: `h-flow-edge 
                        ${lineClass}
                        ${cfg.passed ? 'h-flow-side-history-passed' : ''} 
                        ${cfg.active ? 'h-flow-side-current-active' : ''} 
                        data-role-edge data-id-${cfg.id}`,
        lineWidth,
        'data-role': 'edge',
        'data-id': cfg.id,
        path: [['M', cfg.startPoint.x, cfg.startPoint.y], ...this.cratePath(cfg)],
      },
    });
    // shape = this.drawArrows(cfg, group);

    if (cfg.formula && cfg.formulaText) {
      shape = this.drawFormulaIcon(cfg, group, lineClass);
    }
    return shape;
  },

  drawArrows(cfg, group) {
    let {startPoint, endPoint} = cfg;
    let x = endPoint.x;
    let y = endPoint.y;
    let style = '';

    if (cfg.arrowType === 'right') {
      x -= 6;
      y -= 11;
    }

    if (cfg.arrowType === 'up') {
      x -= 10;
      y -= 15;
      style = 'transform: rotate(-90deg)';
    }

    if (cfg.arrowType === 'down') {
      x -= 10;
      y -= 8;
      style = 'transform: rotate(90deg)';
    }
    let className = [
      'h-flow-arrow',
      (cfg.passed || cfg.active) ? 'h-flow-arrow-passed' : ''
    ];

    group = group.addShape('dom', {
      name: 'formulaText',
      attrs: {
        width: 18, height: 18, x, y,
        html: `<svg class="${className.join(' ')}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="${style}" width="20" height="20">
            <path d="M275.456 532.48L97.792 156.672 926.208 532.48 97.792 867.328 275.456 532.48z"></path></svg>`
      }
    });
    return group;
  },

  drawFormulaIcon(cfg, group, lineClass) {
    let {startPoint, endPoint} = cfg;
    let classNames = [
      'h-flow-formula-icon',
      'h-flow-edge',
      'h-flow-node',
      lineClass,
      'data-role-edge',
      'data-id-' + cfg.id,
      cfg.passed && 'h-flow-side-history-passed'];
    return group.addShape('dom', {
      name: 'formulaText',
      attrs: {
        width: 50,
        height: 50,
        x: startPoint.x + 35,
        y: endPoint.y - 18,
        html:
          `<div class="${classNames.join(" ")}">
            <svg t="1710769808962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9691"><path d="M1021.568 742.4a32 32 0 0 0-6.976-10.432l-127.936-127.936a32 32 0 1 0-45.248 45.312l73.344 73.344h-154.88c-56.192 0-108.928-51.776-164.736-106.56C557.12 578.816 515.968 539.008 469.184 512c46.784-27.008 87.936-66.816 125.952-104.128 55.808-54.784 108.544-106.56 164.736-106.56h154.88l-73.344 73.344a32 32 0 1 0 45.248 45.312l128-128a32 32 0 0 0 0-45.312l-128-127.936a32 32 0 1 0-45.248 45.248l73.408 73.344h-154.944c-82.368 0-147.008 63.488-209.536 124.8C488.576 422.784 430.272 480 359.872 480H32a32 32 0 1 0 0 64h327.872c70.4 0 128.704 57.28 190.464 117.824 62.528 61.376 127.168 124.8 209.536 124.8h154.88l-73.344 73.408a32 32 0 1 0 45.248 45.248l128-128a32 32 0 0 0 6.912-34.816z" fill="#ffffff" p-id="9692"></path></svg>
          </div>`
      }
    });
  },

  createDetailTip(cfg) {
    return `
      <div class="h-flow-formula-detail"></div>
    `;
  },

  drawLabel(cfg, group) {
    let {startPoint, endPoint, gatewayType} = cfg;
    return group.addShape('dom', {
      name: 'label',
      attrs: {
        width: 200,
        height: 60,
        x: endPoint.x - 165,
        y: endPoint.y - 22,
        html: `<div class="h-flow-label h-flow-node" title="${cfg.formulaText || '请配置公式'}" data-role="edge" data-id="${cfg.id}">${this.getFormulaText(cfg)}</div>`
      },
    });
  },

  getFormulaText(cfg) {
    return cfg.formulaText || '<svg t="1710565741910" class="h-flow-edge-label-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4204"><path d="M675.04 483.264l-127.04 0 0-127.264c0-20.064-16.288-36.32-36.32-36.32-20.064 0-36.32 16.192-36.32 36.32l0 127.232-127.072 0c-20.064 0-36.352 16.32-36.352 36.352 0 20.064 16.224 36.352 36.352 36.352l127.072 0 0 127.232c0 20 16.256 36.384 36.32 36.384 20.032 0 36.32-16.256 36.32-36.384l0-127.136 127.04 0c19.968 0 36.352-16.256 36.352-36.384C711.36 499.552 695.136 483.264 675.04 483.264L675.04 483.264zM511.328 65.44c-250.24 0-453.952 203.616-453.952 453.952 0 250.336 203.712 453.952 453.952 453.952 250.336 0 453.984-203.584 453.984-453.952C965.312 269.056 761.696 65.44 511.328 65.44L511.328 65.44zM511.328 916.576c-219.04 0-397.184-178.176-397.184-397.152 0-219.104 178.144-397.216 397.184-397.216s397.216 178.112 397.216 397.216C908.576 738.368 730.368 916.576 511.328 916.576L511.328 916.576zM511.328 916.576" fill="#606266" p-id="4205"></path></svg>';
  },

  cratePath(cfg) {
    let {startPoint, endPoint, gatewayType} = cfg;

    if (gatewayType === 'start') {
      //开始是网关的线
      endPoint.x -= this.arrowSize;
      cfg.arrowType = 'right';
      if (cfg.endGateWay) {
      }
      return [["L", startPoint.x, endPoint.y], ["L", endPoint.x, endPoint.y]];
    }

    if (gatewayType === 'end') {
      //结束是网关的线
      if (endPoint.y > startPoint.y) {
        endPoint.y -= this.arrowSize;
        cfg.arrowType = 'down';
      } else {
        endPoint.y += this.arrowSize;
        cfg.arrowType = 'up';
      }
      return [["L", endPoint.x, startPoint.y], ["L", endPoint.x, endPoint.y]];
    }

    if (cfg.endGateWay) {
      endPoint.x -= 14;
    }
    endPoint.x -= this.arrowSize;
    cfg.arrowType = 'right';
    return [['L', endPoint.x, endPoint.y]];
  }
};
